<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的订单 - 邻里</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
        }
        
        body {
            background-color: #f5f7fa;
            color: #333;
            line-height: 1.6;
            max-width: 500px;
            margin: 0 auto;
            padding: 0 10px 70px;
        }
        
        /* 顶部导航栏 */
        .header {
            background: linear-gradient(135deg, #4e54c8, #8f94fb);
            color: white;
            padding: 15px;
            border-radius: 0 0 15px 15px;
            margin-bottom: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 4px 12px rgba(78, 84, 200, 0.2);
        }
        
        .header-title {
            font-size: 1.2rem;
            font-weight: 600;
        }
        
        .header-icon {
            color: white;
            font-size: 1.2rem;
            text-decoration: none;
        }
        
        /* 筛选栏 */
        .filter-bar {
            display: flex;
            background-color: white;
            border-radius: 12px;
            overflow: hidden;
            margin-bottom: 15px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        }
        
        .filter-item {
            flex: 1;
            text-align: center;
            padding: 12px 0;
            font-size: 0.95rem;
            color: #888;
            border-bottom: 2px solid transparent;
        }
        
        .filter-item.active {
            color: #4e54c8;
            border-bottom-color: #4e54c8;
            font-weight: 500;
        }
        
        /* 订单列表 */
        .orders-list {
            margin-bottom: 20px;
        }
        
        /* 订单项 */
        .order-item {
            background-color: white;
            border-radius: 12px;
            overflow: hidden;
            margin-bottom: 15px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        }
        
        .order-header {
            padding: 12px 15px;
            border-bottom: 1px solid #f1f1f1;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .order-id {
            font-size: 0.9rem;
            color: #888;
        }
        
        .order-status {
            font-size: 0.9rem;
            font-weight: 500;
        }
        
        .status-pending {
            color: #e67e22; /* 待确认 - 橙色 */
        }
        
        .status-confirmed {
            color: #3498db; /* 已确认 - 蓝色 */
        }
        
        .status-borrowing {
            color: #9b59b6; /* 借用中 - 紫色 */
        }
        
        .status-completed {
            color: #27ae60; /* 已完成 - 绿色 */
        }
        
        .status-canceled {
            color: #e74c3c; /* 已取消 - 红色 */
        }
        
        .status-unpaid {
            color: #f39c12; /* 待支付 - 橙黄色 */
        }
        
        .order-content {
            display: flex;
            padding: 15px;
        }
        
        .order-image {
            width: 80px;
            height: 80px;
            background-color: #f8f9fa;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #999;
            font-size: 1.5rem;
            border-radius: 8px;
            flex-shrink: 0;
        }
        
        .order-details {
            flex: 1;
            margin-left: 15px;
        }
        
        .order-title {
            font-size: 1.05rem;
            font-weight: 600;
            margin-bottom: 8px;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .order-meta {
            font-size: 0.9rem;
            color: #666;
            margin-bottom: 4px;
        }
        
        .order-meta i {
            color: #888;
            margin-right: 5px;
            width: 16px;
            text-align: center;
        }
        
        .order-price {
            margin-top: 8px;
            font-size: 0.95rem;
            color: #ff6b6b;
            font-weight: 600;
        }
        
        .order-actions {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            padding: 10px 15px;
            border-top: 1px solid #f1f1f1;
        }
        
        .order-action-btn {
            padding: 6px 14px;
            border-radius: 6px;
            font-size: 0.9rem;
            border: none;
            cursor: pointer;
        }
        
        .btn-outline {
            background-color: transparent;
            border: 1px solid #4e54c8;
            color: #4e54c8;
        }
        
        .btn-primary {
            background: linear-gradient(135deg, #4e54c8, #8f94fb);
            color: white;
        }
        
        .btn-gray {
            background-color: #f5f7fa;
            color: #333;
        }
        
        /* 底部导航 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: white;
            display: flex;
            justify-content: space-around;
            padding: 12px 0;
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
            max-width: 500px;
            margin: 0 auto;
        }
        
        .nav-item {
            text-align: center;
            color: #888;
            text-decoration: none;
            font-size: 0.9rem;
        }
        
        .nav-item.active {
            color: #4e54c8;
        }
        
        .nav-item i {
            font-size: 1.2rem;
            display: block;
            margin-bottom: 4px;
        }
        
        /* 空状态 */
        .empty-state {
            text-align: center;
            padding: 50px 20px;
            color: #888;
        }
        
        .empty-state i {
            font-size: 4rem;
            margin-bottom: 20px;
            color: #ddd;
        }
        
        .empty-state p {
            margin-bottom: 20px;
        }
        
        .empty-state button {
            background: linear-gradient(135deg, #4e54c8, #8f94fb);
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 20px;
            font-weight: 500;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <div class="header">
        <a href="javascript:history.back()" class="header-icon"><i class="fas fa-arrow-left"></i></a>
        <div class="header-title">我的订单</div>
        <a href="#" class="header-icon"><i class="fas fa-search"></i></a>
    </div>
    
    <!-- 筛选栏 -->
    <div class="filter-bar">
        <div class="filter-item active">全部</div>
        <div class="filter-item">待付款</div>
        <div class="filter-item">进行中</div>
        <div class="filter-item">已完成</div>
    </div>
    
    <!-- 订单列表 -->
    <div class="orders-list">
        <!-- 订单项1 - 借用中 -->
        <div class="order-item">
            <div class="order-header">
                <div class="order-id">订单编号: 20240921001</div>
                <div class="order-status status-borrowing">借用中</div>
            </div>
            <div class="order-content">
                <div class="order-image"><i class="fas fa-camera"></i></div>
                <div class="order-details">
                    <div class="order-title">专业单反相机 佳能EOS R6 几乎全新</div>
                    <div class="order-meta"><i class="fas fa-user"></i> 李同学（12号楼）</div>
                    <div class="order-meta"><i class="fas fa-calendar"></i> 2024-09-05 至 2024-09-07</div>
                    <div class="order-price">¥50/天 × 3天 = ¥150</div>
                </div>
            </div>
            <div class="order-actions">
                <button class="order-action-btn btn-outline">联系对方</button>
                <button class="order-action-btn btn-primary">确认归还</button>
            </div>
        </div>
        
        <!-- 订单项2 - 待付款 -->
        <div class="order-item">
            <div class="order-header">
                <div class="order-id">订单编号: 20240921002</div>
                <div class="order-status status-unpaid">待付款</div>
            </div>
            <div class="order-content">
                <div class="order-image"><i class="fas fa-tools"></i></div>
                <div class="order-details">
                    <div class="order-title">家用工具箱 含螺丝刀/扳手/钳子等常用工具</div>
                    <div class="order-meta"><i class="fas fa-user"></i> 王邻居（5号楼）</div>
                    <div class="order-meta"><i class="fas fa-calendar"></i> 2024-09-22 至 2024-09-23</div>
                    <div class="order-price">¥20/天 × 2天 = ¥40</div>
                </div>
            </div>
            <div class="order-actions">
                <button class="order-action-btn btn-gray">取消订单</button>
                <button class="order-action-btn btn-primary">立即支付</button>
            </div>
        </div>
        
        <!-- 订单项3 - 已完成 -->
        <div class="order-item">
            <div class="order-header">
                <div class="order-id">订单编号: 20240822001</div>
                <div class="order-status status-completed">已完成</div>
            </div>
            <div class="order-content">
                <div class="order-image"><i class="fas fa-camera"></i></div>
                <div class="order-details">
                    <div class="order-title">专业单反相机 佳能EOS R6 几乎全新</div>
                    <div class="order-meta"><i class="fas fa-user"></i> 张邻居（3号楼）</div>
                    <div class="order-meta"><i class="fas fa-calendar"></i> 2024-08-20 至 2024-08-22</div>
                    <div class="order-price">¥50/天 × 3天 = ¥150</div>
                </div>
            </div>
            <div class="order-actions">
                <button class="order-action-btn btn-primary view-details" data-order-id="20240822001">查看详情</button>
            </div>
        </div>
        
        <!-- 订单项4 - 已取消 -->
        <div class="order-item">
            <div class="order-header">
                <div class="order-id">订单编号: 20240910001</div>
                <div class="order-status status-canceled">已取消</div>
            </div>
            <div class="order-content">
                <div class="order-image"><i class="fas fa-book-open"></i></div>
                <div class="order-details">
                    <div class="order-title">Web开发入门到实践 前端开发经典书籍</div>
                    <div class="order-meta"><i class="fas fa-user"></i> 赵同学（7号楼）</div>
                    <div class="order-meta"><i class="fas fa-calendar"></i> 2024-09-12 至 2024-09-15</div>
                    <div class="order-price">¥30/天 × 4天 = ¥120</div>
                </div>
            </div>
            <!-- 已取消订单没有按钮 -->
            <div class="order-actions"></div>
        </div>
    </div>
    
    <!-- 底部导航 -->
    <div class="bottom-nav">
        <a href="#" class="nav-item">
            <i class="fas fa-home"></i>
            <div>首页</div>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-comments"></i>
            <div>社区</div>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-store"></i>
            <div>商城</div>
        </a>
        <a href="#" class="nav-item active">
            <i class="fas fa-user"></i>
            <div>我的</div>
        </a>
    </div>

    <script>
        // 筛选栏切换功能
        const filterItems = document.querySelectorAll('.filter-item');
        filterItems.forEach(item => {
            item.addEventListener('click', () => {
                filterItems.forEach(i => i.classList.remove('active'));
                item.classList.add('active');
            });
        });
        
        // 查看详情按钮点击事件
        document.querySelectorAll('.view-details').forEach(btn => {
            btn.addEventListener('click', () => {
                const orderId = btn.getAttribute('data-order-id');
                // 在实际应用中，这里会跳转到新页面
                // 这里使用本地存储传递订单ID，然后显示模拟的详情弹窗
                localStorage.setItem('currentOrderId', orderId);
                window.location.href = 'order_details.html';
            });
        });
        
        // 其他订单操作按钮功能
        const actionBtns = document.querySelectorAll('.order-action-btn:not(.view-details)');
        actionBtns.forEach(btn => {
            btn.addEventListener('click', () => {
                const actionText = btn.textContent.trim();
                const orderItem = btn.closest('.order-item');
                const orderStatus = orderItem.querySelector('.order-status');
                
                switch(actionText) {
                    case '立即支付':
                        if (confirm('确认支付订单金额？')) {
                            alert('跳转到支付页面');
                            orderStatus.textContent = '已确认';
                            orderStatus.className = 'order-status status-confirmed';
                            const actionsContainer = orderItem.querySelector('.order-actions');
                            actionsContainer.innerHTML = `
                                <button class="order-action-btn btn-outline">联系对方</button>
                                <button class="order-action-btn btn-primary">已取货</button>
                            `;
                        }
                        break;
                        
                    case '取消订单':
                        if (confirm('确定要取消此订单吗？取消后可能会产生手续费。')) {
                            orderStatus.textContent = '已取消';
                            orderStatus.className = 'order-status status-canceled';
                            const actionsContainer = orderItem.querySelector('.order-actions');
                            actionsContainer.innerHTML = ''; // 清空按钮
                        }
                        break;
                        
                    case '确认归还':
                        if (confirm('确认对方已归还物品且完好无损？')) {
                            orderStatus.textContent = '已完成';
                            orderStatus.className = 'order-status status-completed';
                            const actionsContainer = orderItem.querySelector('.order-actions');
                            actionsContainer.innerHTML = `
                                <button class="order-action-btn btn-primary view-details">查看详情</button>
                            `;
                            // 为新添加的按钮绑定事件
                            actionsContainer.querySelector('.view-details').addEventListener('click', () => {
                                window.location.href = 'order_details.html';
                            });
                        }
                        break;
                        
                    case '联系对方':
                        alert('跳转到聊天界面');
                        break;
                        
                    case '已取货':
                        if (confirm('确认已取货？')) {
                            orderStatus.textContent = '借用中';
                            orderStatus.className = 'order-status status-borrowing';
                            const actionsContainer = orderItem.querySelector('.order-actions');
                            actionsContainer.innerHTML = `
                                <button class="order-action-btn btn-outline">联系对方</button>
                                <button class="order-action-btn btn-primary">确认归还</button>
                            `;
                        }
                        break;
                }
            });
        });
    </script>
</body>
</html>
    